<template>
    <div class="container">
        <div class="detail">
            <img :src="require('../assets/'+this.good.img)"  class="img">
            <div class="content">
                <div class="title">{{good.name}}</div>
                <span class="author">{{good.author}}</span>
                <span class="publisher">{{good.publisher}}</span>
                <div class="priceBox">
                    <span class="price">￥{{currentPrice(good.price_origin,good.discount)}}</span>
                    <span class="price_orgin" v-if="good.discount!=1">{{good.price_origin}}</span>
                    <span class="discount" v-if="good.discount!=1">{{sale(good.discount)}}</span>
                </div>
                <p>{{good.info}}</p>
            </div>
        </div>
        <div><el-input-number size="mini" v-model="amount"></el-input-number><button class="buy" @click="gocart">放进购物车</button></div>
  </div>
</template>
<script>
import axios from "axios"
export default {
  data(){
      return{
          good:{},
          amount:1
      }
  },
  props:['id'],
  mounted(){
      axios.get('api/user/search',{
           params:{
              'sid':0,
              'search':this.$route.params.id
          }
        }).then(Response=>{
            console.log(Response);
            if(Response.code==0){
                alert(Response.msg);
                
            }else if(Response.code==1){
                alert(Response.msg);
                
            }else{
                console.log(Response.msg);
                // console.log(data.data)
                this.good=[...Response.data][0]
                // JSON.parse(this.good)
                // console.log(this.good.name)
            }
        })
  },
  methods:{
      currentPrice:function(orgin,discount){
          return orgin*discount
      },
      sale:function(discount){
          return discount*10+'折'
      },
      gocart:function(){
          if(localStorage.getItem("Booktoken")){
              axios.post('api/user/changeCart',{
                mid:'add',
                bid:this.good.b_id,
                amount:this.amount
              }).then(res=>{
                console.log(res)
                if(res.code==2){
                    console.log(res.msg)
                    this.goods=[...res.data]
                }else{
                    console.log(res.msg)
                }
            })
          }else{
                let good=Object.assign(this.good,{
                    amount:this.amount
                })
            //   localStorage.removeItem("cart")
                if(!localStorage.getItem("cart")){
                    console.log('新增localstorage')
                    let arr=[] 
                    arr.push(this.good)
                    localStorage.setItem('cart',JSON.stringify(arr)) //这里应该设置数组而不是直接插入数据
                }else{
                    console.log('修改localstorage')
                    let goods=JSON.parse(localStorage.getItem("cart"))// 转换为对象
                    console.log(goods)
                    let flag=goods.findIndex(v=>{
                        console.log(this)
                        return v.b_id===this.good.b_id
                    })
                    console.log('index:'+flag)
                    if(flag===-1){
                        goods.push(this.good)
                    }else{
                        goods[flag].amount+=this.good.amount
                    }
                    localStorage.setItem('cart',JSON.stringify(goods))
                }
                console.log(JSON.parse(localStorage.getItem("cart")))
                
            }
          this.$router.push('/cart')
      }
  }
}
</script>
<style scoped>
.container{
    width: 65%;
    margin: 0 auto;
    padding-top: 7.5em
}

.img{
    float: left;
    width: 350px;
    max-width: 350px;
    margin-right: 20px;
}
.title{
    font-size: 25px;
    font-family: "微软雅黑";
    margin: 5px 0 8px 0;
}
.author{
    color: #007ACC;
    margin-right: 30px
}
.publisher{
    color: grey
}
.priceBox{
    margin-top: 50px
}
.price_orgin{
    text-decoration: line-through;
    color: #555
}
.price{
    color: orangered;
    font-size: 18px;
    margin-right: 20px
}
.discount{
    display: inline-block;
    width: 50px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    background-color: grey
}
</style>
